<template>
  <a-modal
    class="invoice-info-modal"
    :visible="visible"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="false"
    :confirmLoading="confirmLoading"
    width="50%"
    @cancel="closeModal(false)"
    @ok="handleSubmit"
  >
    <a-form-model
      class="invoice-info-form"
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }"
    >
      <a-form-model-item label="抬头类型" prop="headType">
        <a-radio-group v-model="formData.headType" :disabled="handle == 'view'">
          <a-radio :value="1">企业</a-radio>
          <a-radio :value="2">个人</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="发票抬头" prop="buyerName">
        <a-input
          style="width: 300px"
          v-model="formData.buyerName"
          :disabled="handle == 'view'"
          placeholder="请输入发票抬头"
        />
      </a-form-model-item>
      <a-form-model-item v-if="formData.headType == 1" label="公司税号" prop="buyerTaxNum">
        <a-input
          style="width: 300px"
          v-model="formData.buyerTaxNum"
          :disabled="handle == 'view'"
          placeholder="请输入公司税号"
        />
      </a-form-model-item>
      <a-form-model-item label="发票内容" prop="content">
        <a-radio-group v-model="formData.content" :disabled="handle == 'view'">
          <a-radio :value="1">商品类型</a-radio>
          <a-radio :value="2">商品详情</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="收票人邮箱" prop="email">
        <a-input
          style="width: 300px"
          v-model="formData.email"
          :disabled="handle == 'view'"
          placeholder="请输入收票人邮箱"
        />
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button key="back" @click="closeModal(false)">
        {{ handle == "view" ? "返回" : "取消" }}
      </a-button>
      <a-button
        :loading="confirmLoading"
        v-if="handle != 'view'"
        key="submit"
        type="primary"
        @click="handleSubmit"
      >
        提交
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import deepCopy from "@/utils/deepCopy";

const formData = {
  id: undefined, // 发票id
  headType: 1, // 抬头类型
  buyerName: undefined, // 发票抬头
  buyerTaxNum: undefined, // 公司税号
  content: 1, // 发票内容
  email: undefined, // 收票人邮箱
};

export default {
  name: "invoiceInfoForm",
  props: {
    handle: {
      // 操作类型
      type: String,
      default: "edit",
    },
    record: {
      // 选中行数据
      type: Object,
      default() {
        return {};
      },
    },
    visible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      confirmLoading: false, // 提交等待
      formData,
      disabled: false, // 表单禁用状态
      rules: {
        // 表单验证规则
        buyerName: [
          {
            required: true,
            message: "请输入发票抬头",
            trigger: ["change", "blur"],
          },
        ],
        buyerTaxNum: [
          {
            required: true,
            message: "请输入公司税号",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    title() {
      // 弹窗标题
      let res = "";
      switch (this.handle) {
        case "add":
          res = "添加";
          break;
        case "edit":
          res = "编辑";
          break;
        case "view":
          res = "查看";
          break;
        default:
          res = "操作";
          break;
      }
      return res;
    },
  },
  watch: {
    // 监听弹窗显示，回显数据
    visible(value) {
      if (value && this.record.id) {
        this.$nextTick(() => {
          this.formData = deepCopy(this.record);
        });
      } else {
        this.resetData();
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 重置
    resetData() {
      this.formData = deepCopy(formData);
    },
    // 提交
    handleSubmit() {
      let _this = this;
      this.confirmLoading = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$post("/order/invoice/update", this.formData, {
            baseURL: `${location.origin}/goldenhome/invoice/admin`,
          })
            .then((res) => {
              if (res && res.returnCode === 1000) {
                this.confirmLoading = false;
                _this.closeModal(true);
                this.$emit("freshTable");
              } else {
                return;
              }
            })
            .catch((err) => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
          this.$message.error("表单验证失败！");
          return false;
        }
      });
    },
    // 取消
    closeModal(bool) {
      this.$emit("cancel", bool);
    },
  },
};
</script>

<style lang="less" scoped></style>
